<template>
      <div id="mountNode"></div>
</template>
<script>
import G6 from "@antv/g6/build/g6";
export default{
    data(){
        return{
            gData:{
                // 点集
                nodes: [{
                        id: 'node1', // 节点的唯一标识
                        x: 100,      // 节点横坐标
                        y: 200,      // 节点纵坐标
                        label: '起始点', // 节点文本
                        style:{
                            fill: '#ddd',//节点填充色
                            stroke: '#f00',//节点的描边颜色
                            //  shadowColor //阴影颜色
                            // shadowBlur //阴影范围
                            // shadowOffsetX //阴影 x 方向偏移量
                            // shadowOffsetX //阴影 y 方向偏移量
                        }
                    },{
                    id: 'node2',
                    x: 300,
                    y: 200,
                    label: '目标点',
                    shape:'rect',
                    labelCfg:{
                        position:'top,right',//文本相对于节点的位置
                        offset:20,//文本的偏移 
                        style:{
                            fill: '#f00',//文本颜色
                            // stroke: '#f00',//文本描边颜色
                            // lineWidth: 10,//文本描边粗细
                            // opacity:0.8,//文本透明度
                            font:'microsoft yahei',//文本内容的当前字体属性
                            fontSize:30 //文本字体大小
                        }
                    }
                }],
                // 边集
                edges: [
                    // 表示一条从 node1 节点连接到 node2 节点的边
                    {
                        source: 'node1',  // 起始点 id
                        target: 'node2',  // 目标点 id
                        label: '我是连线'   // 边的文本
                    }
                ]
            }
        }
    },
    created(){
        
    },
    mounted(){
         this.$nextTick(() => {
            this.init();
            });
    },
    methods:{
        init(){
            //图实例化时，至少需要为图设置容器、宽、高：
            const graph = new G6.Graph({
                container: 'mountNode', // 指定挂载容器
                width: 800,             // 图的宽度
                height: 500             // 图的高度
            });
            //数据的加载和图的渲染是两个步骤，可以分开进行。
             graph.data(this.gData);  // 加载数据
            graph.render();        // 渲染
        }
    }
}
</script>
